<template>
  <div class="dashboard-container" v-if="this.roleName == '管理员'">
    <h1>员工信息管理</h1>
    <div>
      <el-button type="primary" @click="addButton" style="width: 100px;margin-left: 40px">新增</el-button>
      <el-input placeholder="用户ID" v-model="userId1" clearable style="width: 200px;margin-left: 40px"/>
      <el-input placeholder="用户名称" v-model="userName1" clearable style="width: 200px;margin-left: 40px"/>
      <el-select v-model="roleName1" clearable placeholder="角色" style="width: 200px;margin-left: 40px">
        <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"/></el-select>
      <el-button type="primary" @click="selectAll" style="width: 100px;margin-left: 40px">查询</el-button>
      <el-button @click="checkUser" style="width: 100px;margin-left: 40px">重置</el-button>
      <el-table :data="userList" height="659px" border style="width: 100%;margin-top: 20px">
        <el-table-column align="center" fixed prop="userId"  label="用户ID" sortable/>
        <el-table-column align="center" fixed prop="userName"  label="用户名" sortable/>
        <el-table-column align="center" fixed prop="userPassword"  label="用户密码" sortable/>
        <el-table-column align="center" fixed prop="roleName"  label="角色名称" sortable/>
        <el-table-column align="center" fixed prop="sex"  label="性别" sortable/>
        <el-table-column align="center" fixed prop="identificationCard"  label="身份证号" sortable/>
        <el-table-column align="center" fixed prop="phoneNumber"  label="电话号码" sortable/>
        <el-table-column align="center" fixed prop="remark"  label="备注" sortable/>
        <el-table-column align="center" fixed label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="updateButton(scope.row)" >修改</el-button>
            <el-button type="text" @click="deleteButton(scope.row)"
                       v-if="scope.row.roleId != 1">删除</el-button>
            <el-button type="text" disabled v-else>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="删除" width="40%" :visible.sync="deleteButtonController">
        <h1>请确认是否删除？</h1>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="deleteUser">确定</el-button>
          <el-button @click="deleteButtonController = false">取消</el-button>
        </span>
      </el-dialog>

      <el-dialog title="新增" width="40%" :visible.sync="addButtonController" @close="closeDialog('ruleForm')">
        <el-form label-width="20%" :rules="roles" :model="addList" ref="ruleForm">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="addList.userName" maxlength="20" show-word-limit style="width: 80%" clearable
                      placeholder="请输入用户名称"
            />
          </el-form-item>
          <el-form-item label="用户密码" prop="userPassword">
            <el-input v-model="addList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable
                      placeholder="请输入用户密码"
            />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="addList.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="addList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable
                      placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item label="身份证号" prop="identificationCard">
            <el-input v-model="addList.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable
                      placeholder="请输入身份证号"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addList.remark" maxlength="20" show-word-limit style="width: 80%" clearable
                      placeholder="请输入备注"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addUser('ruleForm')">确定</el-button>
          <el-button @click="closeDialog('ruleForm')">取消</el-button>
        </span>
      </el-dialog>
      <el-dialog title="修改" width="40%" :visible.sync="updateButtonController" @close="closeDialog('ruleForm')">
        <el-form label-width="20%" :rules="roles" :model="updateList" ref="ruleForm">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable
                      placeholder="请输入用户名称"
            />
          </el-form-item>
          <el-form-item label="用户密码" prop="userPassword">
            <el-input v-model="updateList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable
                      placeholder="请输入用户密码"
            />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="updateList.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable
                      placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item label="身份证号" prop="identificationCard">
            <el-input v-model="updateList.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                      clearable placeholder="请输入身份证号"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="updateList.remark" maxlength="20" show-word-limit style="width: 80%" clearable
                      placeholder="请输入备注"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateUser('ruleForm')">确定</el-button>
          <el-button @click="closeDialog('ruleForm')">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  <div class="dashboard-container" v-else>
    <h1>无权限访问</h1>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { deleteByUserId, insert, selectAllUser, update } from '@/api/user'

export default {
  name: 'Users',
  computed: { ...mapGetters(['userId', 'userName', 'roleName']) },
  // 存放页面参数
  data() {
    return {
      userId1: '',
      userName1: '',
      roleName1: '',
      roleList: [{
        value: '管理员',
        label: '管理员'
      },
        {
          value: '员工',
          label: '员工'
        }],
      userList: [],
      addButtonController: false,
      addList: {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      updateButtonController: false,
      updateList: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      deleteButtonController: false,
      deleteUserId: '',
      roles: {
        userName:
          [{ required: true, trigger: 'blur', message: '用户名不能为空' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        userPassword:
          [{ required: true, trigger: 'blur', message: '密码不能为空' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }],
        sex:
          [{ required: true, trigger: 'blur', message: '性别不能为空' }],
        phoneNumber:
          [{ required: true, trigger: 'blur', message: '手机号不能为空' },
            { min: 11, max: 11, message: '请输入正确的手机号格式', trigger: 'blur' }],
        identificationCard:
          [{ required: true, trigger: 'blur', message: '身份证号不能为空' },
            { min: 18, max: 18, message: '请输入正确的身份证号格式', trigger: 'blur' }],
      }
    }
  },
  // 页面初始化加载的方法
  mounted() {
    this.selectAll()
  },
  // 页面的方法和事件
  methods: {
    selectAll() {
      console.log('userId:' + this.userId1)
      console.log('userName:' + this.userName1)
      console.log('roleName:' + this.roleName1)
      selectAllUser({
        userId: this.userId1,
        userName: this.userName1,
        roleName: this.roleName1
      }).then(
        response => {
          this.userList = response.data
        }
      )
    },
    checkUser() {
      this.userId1 = ''
      this.userName1 = ''
      this.roleName1 = ''
      this.selectAll()
    },
    addButton() {
      this.addButtonController = true
      this.addList = {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      }
    },
    addUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insert({
            userName: this.addList.userName,
            userPassword: this.addList.userPassword,
            sex: this.addList.sex,
            phoneNumber: this.addList.phoneNumber,
            identificationCard: this.addList.identificationCard,
            remark: this.addList.remark
          }).then(
            response => {
              this.addButtonController = false
              this.selectAll()
            }
          )
        } else {
          return false;
        }
      });
    },
    updateButton(row) {
      this.updateButtonController = true
      this.updateList = {
        userTableId: row.userTableId,
        userId: row.userId,
        roleId: row.roleId,
        userName: row.userName,
        userPassword: row.userPassword,
        sex: row.sex,
        phoneNumber: row.phoneNumber,
        identificationCard: row.identificationCard,
        remark: row.remark
      }
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update({
            userTableId: this.updateList.userTableId,
            userId: this.updateList.userId,
            roleId: this.updateList.roleId,
            userName: this.updateList.userName,
            userPassword: this.updateList.userPassword,
            sex: this.updateList.sex,
            phoneNumber: this.updateList.phoneNumber,
            identificationCard: this.updateList.identificationCard,
            remark: this.updateList.remark
          }).then(response => {
            this.updateButtonController = false
            this.selectAll()
          })
        } else {
          return false;
        }
      });
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.addButtonController = false
      this.updateButtonController = false
    },
    deleteButton(row) {
      this.deleteButtonController = true
      this.deleteUserId = row.userId
    },
    deleteUser(formName) {
      deleteByUserId({
        userId: this.deleteUserId
      }).then(
        response => {
          this.deleteButtonController = false
          this.selectAll()
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
